<template>
	<view class="pageView">
		<u-loading-page :loading="listLoading" bg-color="#e8e8e8"></u-loading-page>
		<u-navbar
			title="医院列表"
			:autoBack="true"
			bgColor="#0165FB"
			leftIconColor="#fff"
			:titleStyle="{
				color: '#fff'
			}"
		>
		</u-navbar>
		<view class="searchBlock">
			<u-input
				prefixIcon="search"
				prefixIconStyle="font-size: 22px;color: #909399"
				placeholder="请输入内容"
				border="none"
				clearable
				v-model="searchVal"
				:customStyle="{
					background: '#fff',
					borderRadius: '30px',
					padding: '20rpx 36rpx'
				}"
			>
				<template slot="suffix">
					<view class="btnFont" @click="handleClickSearch">搜索</view>
				</template>
			</u-input>
		</view>
		<scroll-view
		  v-if="hospitalList.length > 0"
			style="height: 76vh;background-color: #fff;padding: 32rpx 0px;margin-top: 30rpx;"
			scroll-y="true"
			@scrolltolower="handleScrolltolower"
		>
			<view
			  v-for="(item, index) in hospitalList"
				:key="index"
				class="hospitalListItem"
				@click="handleChooseHospital(item)"
			>
				<view class="hospitalListItem-item">
					<view class="hospitalListItem-item-itemBlock">
						<image :src="item.img_url" class="hospitalListItem-item-itemBlock-avater"></image>
						<view class="hospitalListItem-item-itemBlock-middle">
							<view class="hospitalListItem-item-itemBlock-middle-name">{{ item.name }}</view>
							<view class="hospitalListItem-item-itemBlock-middle-bottom">
								<view class="hospitalListItem-item-itemBlock-middle-bottom-typeBlock">{{ item.level.name }}</view>
								<image src="https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/local.png" style="margin-left: 16rpx;"></image>
								<view class="hospitalListItem-item-itemBlock-middle-bottom-loneBlock" v-if="item && item.juli !== null">{{ (Number(item.juli) / 1000).toFixed(2) }}km</view>
							</view>
						</view>
					</view>
					<view>
						<u-icon name="arrow-right" size="10" color="#999"></u-icon>
					</view>
				</view>
				<u-divider v-if="index != hospitalList.length - 1"></u-divider>
			</view>
		</scroll-view>
		<view class="emptyBlock" v-if="hospitalList.length == 0 && !listLoading">
			<image src="https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/emptyHos.png"></image>
		</view>
	</view>
</template>

<script>
	import { getHospitalList } from '@/api/common.js'
	export default{
		data() {
			return {
				searchVal: '',
				listLoading: false,
				lastPage: 0,
				page: 1,
				hospitalList: []
			}
		},
		onShow() {
			this.page = 1
			this.hospitalList = []
			this.getList()
		},
		methods: {
			handleClickSearch() {
				this.page = 1
				this.hospitalList = []
				this.getList()
			},
			handleScrolltolower() {
				if (this.page < this.lastPage) {
					this.page++
					this.getList()
				}
			},
			handleChooseHospital(item) {
				uni.setStorageSync('hospitalOrderData', item)
				uni.navigateTo({
					url: '/pages/createOrder/createOrder'
				})
			},
			getList() {
				this.listLoading = true
				getHospitalList({
					key: this.searchVal,
					type: 1,
					lat: 0,
					lng: 0,
					page: this.page
				}).then(res => {
					const { code, data } = res
					if (code == 200001) {
						if (this.hospitalList.length == 0) {
							this.hospitalList = data.data
						} else {
							this.hospitalList = this.hospitalList.concat(data.data)
						}
					}
					this.lastPage = data.last_page
					this.listLoading = false
				})
				.catch(e => {
					this.listLoading = false
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.pageView{
		height: 100vh;
		background: #0165FB;
		.searchBlock{
			margin-top: 200rpx;
			padding: 0px 32rpx;
			.btnFont{
				padding-left: 22rpx;
				font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
				font-weight: normal;
				font-size: 26rpx;
				color: #0165FB;
				border-left: 2px solid #DFDFDF;
			}
		}
		.emptyBlock{
			display: flex;
			align-items: center;
			justify-content: center;
			height: 76vh;
			background-color: #fff;
			margin-top: 30rpx;
		}
		.hospitalListItem{
			padding: 0px 32rpx;
			&-item{
				display: flex;
				justify-content: space-between;
				align-items: center;
				&-itemBlock{
					display: flex;
					align-items: center;
					&-avater{
						width: 120rpx;
						height: 120rpx;
						border-radius: 100% 100%;
					}
					&-middle{
						padding-left: 24rpx;
						&-name{
							font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
							font-weight: 500;
							font-size: 36rpx;
							color: #222222;
						}
						&-bottom{
							display: flex;
							align-items: center;
							padding-top: 16rpx;
							&-typeBlock{
								font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
								font-weight: normal;
								font-size: 28rpx;
								color: #222222;
								padding-right: 16rpx;
								border-right: 2rpx solid #DFDFDF;
							}
							image{
								width: 28rpx;
								height: 28rpx;
								margin-right: 16rpx;
							}
							&-loneBlock{
								font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
								font-weight: normal;
								font-size: 28rpx;
								color: #999999;
							}
						}
					}
				}
			}
		}
	}
</style>